<template>
	<view>
		<custom-header title="操作" sticky />
		<view class="_wrap">
			<!-- 花材信息 -->
			<view class="flower_info">
				<view class="title">
					<view class="title-text">花材信息</view>
				</view>
				<view class="info">
					<view class="supplier_base">
						<view class="supplier_name">五洲花卉</view>
						<view class="base_name">红塔基地</view>
					</view>
					<view class="info_item">
						高原红<text class="grade">D级</text>×5/8
					</view>
				</view>
				<view class="info">
					<view class="info_item">
						单价:￥8.00
					</view>
					<view class="info_item">
						总价:￥64.00
					</view>
				</view>
				<view class="info">
					<view class="phone" @click="makeCall">
						<view class="label">商户电话</view>  
						<view class="value">17849466865</view>  
						<view class="icon">
							<image class="phone-icon" src="/static/common/phone1.png" mode="aspectFit"/>
						</view>
					</view>
				</view>
			</view>
			<!-- 操作 -->
			<view class="operation_wrap">
				<view class="title">
					<view class="title-text">操作</view>
					<view class="title-btn" @click="handleGoOperationLog">
						<view class="icon">
							<image src="/static/home/log.png" mode=""></image>
						</view>
						<view class="text">操作日志</view>
						<view class="right_icon">
							<up-icon name="arrow-right" size="28rpx"></up-icon>
						</view>
					</view>
				</view>
				<view class="operation">
					<view 
						class="o_list"
						:class="{active:item.value == operationValue}"
						v-for="(item,index) in operationList" 
						:key="index"
						@click="handleSelectOperation(item.value)">
							{{ item.lable }}
					</view>
				</view>
			</view>
		</view>
		<view class="footer_btn_wrap fixed">
			<view class="btn_wrap">
				<button
					size="default" 
					type="default" 
					class="btn"
					@click="handleSubmit">确认配货</button>
			</view>
		</view>
		
		<!-- 弹出层提示 -->
		<custom-toast 
			:show="isShowToast"
			:config="toastConfig"
			@cancel="hideToast"
			@confirm="confirmToast" />
	</view>
</template>

<script setup>
	import { ref,reactive,computed,onMounted } from 'vue'
	// 弹出层操作
	import useToast from '../../utils/toast.js'
	const { isShowToast,toastConfig,showToast,hideToast } = useToast()
	// 弹出层确认
	const confirmToast = (data)=>{
		console.log(data)
		// 确认配货
		if(data?.type == 'distribution'){
			setTimeout(()=>{
				hideToast()
				uni.navigateBack()
			},800)
		}else{
			hideToast()
		}
	}
	
	// 操作类型
	const operationValue = ref(null)
	const operationList = ref([
		{ lable:'缺货退货',value:1 },
		{ lable:'换货',value:2 },
		{ lable:'撤销',value:3 },
		{ lable:'降级',value:4 }
	])
	const handleSelectOperation = (value)=>{
		operationValue.value = value
	}
	
	// 拨打电话
	const makeCall = () => {
	  uni.makePhoneCall({
	    phoneNumber: '10086'
	  })
	}
	
	// 操作日志
	const handleGoOperationLog = ()=>{
		uni.navigateTo({
			url:'/pages/operationLog/operationLog'
		})
	}
	
	// 提交
	const handleSubmit = ()=>{
		showToast({
			message:'确定要配货吗？',
			showCancel:true,
			data:{
				type:'distribution'
			}
		})
	}
	
	onMounted(() => {
	  // 获取页面参数
	  const pages = getCurrentPages()
	  const currentPage = pages[pages.length - 1]
	  const options = currentPage.options
	  console.log(options)
	  
	})
</script>

<style lang="scss">
	._wrap{
		padding: 0 24rpx 40rpx;
	}
	.flower_info,
	.operation_wrap,
	.form_wrap{
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 24rpx;
		padding: 0 24rpx 24rpx;
		.title{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 32rpx;
			.title-text{
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
		}
	}
	.flower_info{
		.info{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 24rpx;
			font-size: 28rpx;
			color: #666;
			.supplier_base{
				display: flex;
				align-items: center;
				.base_name{
					padding: 2rpx 8rpx;
					border: 1px solid #F5564D;
					color: #F5564D;
					font-size: 20rpx;
					border-radius: 8rpx;
					margin-left: 8rpx;
				}
			}
			.grade{
				color: #F5564D;
			}
			.phone{
				display: flex;
				align-items: center;
				.value{
					color: #4298FF;
					padding: 0 8rpx;
				}
				.icon{
					width: 18rpx;
					height: 18rpx;
					display: flex;
				}
			}
		}
	}
	.operation_wrap{
		.title{
			.title-btn{
				display: flex;
				align-items: center;
				.text{
					font-size: 24rpx;
					padding: 0 8rpx;
				}
				.icon{
					display: flex;
					width: 23rpx;
					height: 24rpx;
					
					color: #333333;
				}
			}
		}
		.operation{
			display: flex;
			justify-content: space-between;
			padding-top: 32rpx;
			.o_list{
				width: 149rpx;
				text-align: center;
				height: 56rpx;
				line-height: 56rpx;
				border-radius: 10rpx;
				border: 1px solid #D7D7D7;
				font-size: 24rpx;
				color: #333333;
				&.active{
					background: #FFF0F0;
					color: #F5564D;
					border: 1px solid #F5564D;
				}
			}
		}
	}
	.form_wrap{
		.title-btn{
			color: #F5564D;
			width: 100rpx;
			text-align: right;
			&:active{
				// background-color: #f1f1f1;
			}
		}
		.label_title{
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
			.required{
				color: #F5564D;
			}
		}
		.demotion_list_wrap,.selfTest_list_wrap{
			display: flex;
			justify-content: space-between;
			padding-top: 24rpx;
			.list{
				width: 110rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 16rpx;
				background: #F5F6FA;
				border: 1px solid #F5F6FA;
				font-size: 28rpx;
				color: #666;
				&.active{
					background: #FFF0F0;
					color: #F5564D;
					border: 1px solid #F5564D;
				}
			}
		}
		.selfTest_list_wrap{
			.list{
				width: 148rpx;
			}
		}
		.number_wrap{
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 32rpx;
		}
		.upload_wrap{
			padding-top: 32rpx;
			.image_wrap,.textarea_wrap{
				padding-top: 24rpx;
				.u-textarea{
					border-color: #D7D7D7 !important;
				}
			}
		}
	}
</style>
